<!--  -->
<template>
  <div class='DetailAndEdit'>
    <el-dialog
      title="进出场车辆详情"
      :visible.sync="dialogVisible"
      width="60%"
      top="1vh"
      :before-close="handleClose"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
    >
      <div class="header_title">
        <div>RFID:{{form.rfId}}</div>
        <div>车辆状态：{{form.carStatus | getCarStatus(carStatusList)}}</div>
        <div>入场时间:{{form.enterInTime | formaDate}}</div>
        <div v-if="tabActiveName===0">出场时间：{{form.comeOutTime | formaDate}}</div>
      </div>
      <el-tabs
        v-model="activeName"
        @tab-click="handleClick"
      >
        <el-tab-pane
          label="详情"
          name="first"
        >
          <span>车辆信息
            <!-- <i
              class="el-icon-edit editCar"
              @click="editcar"
            >{{option.detail?'编辑':'取消编辑'}}</i> -->
          </span>
          <el-divider></el-divider>
          <avue-form
            ref="form"
            v-model="form"
            :option="option"
          >
          </avue-form>
          <div class="urllist">
            <template v-for="(item,index) in form.crCarFileList">
              <div
                v-show="CheckImgExists(item.url)"
                class="urlitem"
                :key="index"
              >
                <p>{{urlTitle[index]}}</p>
                <img :src="item.url">
              </div>
            </template>
            <!-- <avue-form
              :option="optionFiles"
              v-model="formFiles"
              :upload-preview="uploadPreview"
              :upload-error="uploadError"
              :upload-delete="uploadDelete"
              :upload-before="uploadBefore"
              :upload-after="uploadAfter"
            > </avue-form> -->
          </div>
        </el-tab-pane>
        <el-tab-pane
          label="操作日志"
          name="second"
        >
          <operation-log
            :Loglist="Loglist"
            v-if="activeName=='second'"
          ></operation-log>
        </el-tab-pane>
      </el-tabs>
      <span
        slot="footer"
        class="dialog-footer"
        v-if="activeName!='second'&& !option.detail"
      >
        <el-button
          @click="handleClose"
          icon="el-icon-circle-close"
        >取 消</el-button>
        <el-button
          type="primary"
          icon="el-icon-circle-check"
          @click="dosubmit"
        >确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
// 这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
// 例如：import 《组件名称》 from '《组件路径》';
import { OperationLog, getDicType } from '@/api/common'
import OperationLogs from '@/components/OperationLog/index'
import { putObj } from '@/api/crcar'
export default {
  // import引入的组件需要注入到对象中才能使用
  components: { 'operation-log': OperationLogs },
  data () {
    // 这里存放数据
    return {
      dialogVisible: false,
      form: {},
      activeName: 'first',
      option: {
        detail: true,
        emptyBtn: false,
        submitBtn: false,
        labelWidth: 100,
        column: [{
          type: 'input',
          label: "商家名称",
          prop: "name",
          span: 9,
          rules: [{
            required: true,
            message: "请输入商家名称",
            trigger: "blur"
          }]
        }, {
          label: "车辆品牌",
          prop: "carBrand",
          span: 6,
          labelWidth: 80,
          rules: [{
            required: true,
            message: "请输入车辆品牌",
            trigger: "blur"
          }]
        }, {
          label: "车辆类型",
          prop: "carType",
          span: 8,
          rules: [{
            required: true,
            message: "车辆类型",
            trigger: "blur"
          }]
        }, {
          label: "车架号",
          prop: "carFrameNo",
          span: 9,
          rules: [{
            required: true,
            message: "车架号",
            trigger: "blur"
          }]
        }, {
          label: "车辆颜色",
          prop: "carColor",
          span: 6,
          labelWidth: 80,
          rules: [{
            required: true,
            message: "车辆颜色",
            trigger: "blur"
          }]
        }, {
          label: "是否金融车",
          prop: "isFinanceCar",
          span: 8,
          type: 'select',
          rules: [{
            required: true,
            message: "是否金融车",
            trigger: "blur"
          }],
          dicData: [{
            label: '否',
            value: 0
          }, {
            label: '是',
            value: 1
          }]
        }, {
          label: "是否收费",
          prop: "isFeeRequire",
          span: 9,
          type: 'radio',
          rules: [{
            required: true,
            message: "车辆类型",
            trigger: "blur"
          }],
          dicData: [{
            label: '否',
            value: 0
          }, {
            label: '是',
            value: 1
          }]
        }, {
          label: "停车费(元)",
          prop: "parkingFee",
          span: 6,
          labelWidth: 90,
          rules: [{
            required: true,
            message: "停车费(元)",
            trigger: "blur"
          }]
        }, {
          detail: true,
          span: 8,
        }, {
          label: '备注',
          type: 'textarea',
          prop: "remarks",
          placeholder: "请备注变更收费状态原因",
          span: 8,
        }]
      },
      optionFiles: {
        column: [{
          label: '入场车辆图片',
          prop: 'car',
          type: 'upload',
          listType: 'picture-img',
          span: 8,
          propsHttp: {
            res: 'data'
          },
          canvasOption: {
            text: 'avue',
            ratio: 0.1
          },
          tip: '只能上传jpg/png用户头像，且不超过500kb',
          action: '/imgupload'
        },]
      },
      formFiles: {
        car: '',
        in: '',
        out: ''
      },
      tabActiveName: 0,
      urlTitle: ['车辆图片', '入场车辆图片', '出场车辆图片'],
      Loglist: [],
      carStatusList: []
    }
  },
  // 监听属性 类似于data概念
  computed: {},
  // 监控data中的数据变化
  watch: {},
  filters: {
    formaDate (val) {
      if (val) {
        return val.substring(0, 19)
      } else {
        return ''
      }
    },
    getCarStatus (val, list) {
      let str = ''
      list.forEach(item => {
        if (val == item.value) {
          str = item.label
        }
      })
      return str
    }
  },
  // 方法集合
  methods: {
    CheckImgExists (imgurl) {
      var ImgObj = new Image(); //判断图片是否存在  
      ImgObj.src = imgurl;
      //存在图片
      if (ImgObj.fileSize > 0 || (ImgObj.width > 0 && ImgObj.height > 0)) {
        return true;
      } else {
        return false;
      }
    },
    handleRemove () {

    },
    editcar () {
      if (this.option.detail) {
        this.option.detail = false
      } else {
        this.option.detail = true
      }
    },
    dosubmit () {
      this.handleClose()
      putObj(this.form).then(data => {
        this.$message.success('保存成功')
        this.$emit("refresh")
      })
    },
    init (row, activeName, tabActiveName) {
      getDicType('car_status').then(res => {
        if (res.data.data) {
          this.carStatusList = res.data.data
        } else {
          this.carStatusList = []
        }
      })
      this.tabActiveName = tabActiveName
      if (activeName === '0') {
        this.option.column[3].prop = "carNumber"
        this.option.column[3].label = "车牌号"
      } else {
        this.option.column[3].prop = "carFrameNo"
        this.option.column[3].label = "车架号"
      }
      this.form = row
      this.dialogVisible = true
    },
    handleClose () {
      this.dialogVisible = false
      this.activeName = 'first'
    },
    handleClick () {
      if (this.activeName != 'first') {
        let url = '/config/sysoperationlog/' + this.form.id + '/2'
        OperationLog(url).then(response => {
          this.Loglist = response.data.data
        })
      }
    },
    // 图片
    uploadDelete (column, file) {
      console.log(column, file)
      return this.$confirm(`这里是自定义的，是否确定移除该选项？`);
    },
    uploadBefore (file, done, loading, column) {
      console.log(file, column)
      //如果你想修改file文件,由于上传的file是只读文件，必须复制新的file才可以修改名字，完后赋值到done函数里,如果不修改的话直接写done()即可
      var newFile = new File([file], '1234', { type: file.type });
      done(newFile)
      this.$message.success('上传前的方法')
    },
    uploadError (error, column) {
      this.$message.success('上传失败')
      console.log(error, column)
    },
    uploadAfter (res, done, loading, column) {
      console.log(res, column)
      done()
      this.$message.success('上传后的方法')
    },
    uploadPreview (file, column, done) {
      console.log(file, column)
      done()//默认执行打开方法
      this.$message.success('自定义查看方法,查看控制台')
    },
  },
  // 生命周期 - 创建完成（可以访问当前this实例）
  created () {

  },
  // 生命周期 - 挂载完成（可以访问DOM元素）
  mounted () {

  },
  beforeCreate () { }, // 生命周期 - 创建之前
  beforeMount () { }, // 生命周期 - 挂载之前
  beforeUpdate () { }, // 生命周期 - 更新之前
  updated () { }, // 生命周期 - 更新之后
  beforeDestroy () { }, // 生命周期 - 销毁之前
  destroyed () { }, // 生命周期 - 销毁完成
  activated () { } // 如果页面有keep-alive缓存功能，这个函数会触发
}
</script>
<style lang='scss' scoped>
//@import url(); 引入公共css类
.header_title {
  font-size: 20px;
  display: flex;
  flex-wrap: wrap;
  div {
    padding: 5px 0px;
    width: 50%;
  }
}
.urllist {
  display: flex;
  flex-wrap: wrap;
  .urlitem {
    padding: 0px 15px;
    img {
      width: 200px;
      height: 200px;
    }
  }
}
.editCar {
  margin-left: 10px;
  cursor: pointer;
}
.editCar:hover {
  color: blue;
}
</style>
